<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8" :offset="1">
        <el-form ref="form" label-width="180px">
          <div>
            <el-button @click="onSubmit">保存设置</el-button>
            <i style="color: red;font-size: 16px;padding-left: 20px;">注意:修改完成后要记得保存设置,否则将设置将不会起效</i>
          </div>
          <h3>加班</h3>
          <el-form-item label="最短加班时长">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <h3>打卡时间</h3>
          <el-form-item label="上班时间">
            <el-time-picker v-model="form.date1" placeholder="选择时间" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="下班时间">
            <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
          </el-form-item>
          <h3>补卡</h3>
          <el-form-item label="每月最大补卡次数">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="前天内可以补签">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <h3>迟到</h3>
          <el-form-item label="一般迟到">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="严重迟到">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="旷工">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <h3>早退</h3>
          <el-form-item label="一般早退">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="严重早退">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="旷工">
            <el-form.name v-model="form.name" placeholder="请输入内容" />
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        date1: '',
        date2: ''
      }
    }
  }
}
</script>

<style>

</style>
